<template>
    <div id="app">
        <Header></Header>
        <router-view/>
        <div class="nex_sidetool_bar">
            <div class="nex_sidetool_bar_inner">
                <div class="nex_sidetool_bar_top">
                    <!--          <div class="nex_sidetool_bar_item">-->
                    <!--            <a href="/index.php?mod=mobile&act=shopwap&do=membercenter&beid=44" target="_blank">-->
                    <!--              <i class="nex_stb_ucenter"></i>-->
                    <!--              <span class="nex_stb_desc actives">会员中心</span>-->
                    <!--            </a>-->
                    <!--          </div>-->
                    <div class="nex_sidetool_bar_item">

                        <a href="/vip" target="_blank">
                            <i class="nex_stb_pm"></i>
                            <span class="nex_stb_desc actives">开通VIP</span>
                        </a>

                    </div>
                    <!--          <div class="nex_sidetool_bar_item share">-->
                    <!--            <a href="javascript:;">-->
                    <!--              <i class="nex_stb_qrcode"></i>-->
                    <!--              <span class="nex_stb_desc actives">分享海报</span>-->
                    <!--            </a>-->
                    <!--          </div>-->
                    <div class="nex_sidetool_bar_item">
                        <a href="javascript:;">
                            <i class="nex_stb_notice"></i>
                            <div class="nex_stb_qrcode_box">
                                <img src="/static/picture/wechat.png">
                                <p>扫码联系官方客服</p>
                            </div>
                        </a>
                    </div>
                    <div class="nex_sidetool_bar_item">
                        <a href="/list/38" target="_blank">
                            <i class="nex_stb_search"></i>
                            <span class="nex_stb_desc actives">搜索内容</span>
                        </a>
                    </div>
                    <div class="nex_sidetool_bar_item" id="nex_rolltoptop">
                        <i class="nex_stb_scrolltop"></i>
                        <span class="nex_stb_desc actives">返回顶部</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="E-footer" style="min-width: 1200px;">
            <div class="footer-related">
                <div class="footer-article w1210">
                    <dl class="col-article">
                        <dt>池塘边素材 客服微信:ctbsc2021</dt>
                        <dt>©本站由心相译科技工作室提供技术支持（建站咨询 微信:gds921001）</dt>
                        <dd>
                            <a href="/search" target="_blank"
                               title="搜资料教程（必读）">搜资料教程（必读）</a>
                        </dd>
                    </dl>

                    <!--          <div class="col-code">-->
                    <!--            <div class="code">-->
                    <!--              <img src="/static/picture/qrcode.php" alt="池塘边素材网">-->
                    <!--            </div>-->
                    <!--            <p>手机版</p>-->
                    <!--          </div>-->
                    <div style="margin-left: 120px" class="col-code2">
                        <div class="code">
                          <img src="/static/picture/wechat.png" alt="客服微信" width="120">
                        </div>
                        <p>客服微信</p>
                    </div>
                    <div  class="col-code2">
                        <div class="code">
                          <img src="/static/picture/yng19ztnmxlig55.jpg" alt="池塘边素材网" width="120">
                        </div>
                        <p>公众号</p>
                    </div>
                </div>
                <div class="footer-info w1210">
                    <div class="info-text">
                        <p class="copyright">
                            Copyright © 2016-2022 <span >池塘边素材网</span> All Rights Reserved &nbsp;&nbsp; 鲁公网安备37132502371553号 &nbsp;&nbsp;
                          <a href="http://beian.miit.gov.cn" target="_blank" class="text">鲁ICP备2022024949号-1 </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

    import Header from "@/components/Header.vue";

    export default {
        name: "homeview",
        components: {
            Header
        },
        data() {
            return {};
        },
        created() {
          if (this.$store.getters.token) {
            this.getUserInfo()
          }
            this.$watch(
                () => this.$route.query,
                () => {

                    if (this.$route.query.code) {

                        /*
                        * 因为lyxinxinagyi和ctbsc都可以访问该网站，在二维码登录的时候需要用不同的wxappid,所以要告诉后端，fromUrl是谁
                        * */
                        let code = this.$route.query.code;
                        let currentUrl = window.location.href
                        let fromUrl = 'lyxinxiangyi'
                        if(currentUrl.indexOf('ctbsc')!==-1){
                            fromUrl = 'ctbsc'
                        }
                        this.$apis.wxOpenLogin({code: code,fromUrl:fromUrl}).then(res => {
                            if (res['records']) {
                                let userInfo = res.records;
                                let token = userInfo.token;
                                this.$store.dispatch('user/updateUserInfo', userInfo)
                                this.$store.dispatch('user/updateToken', token).then(res=>{
                                    let query=JSON.parse(JSON.stringify(this.$route.query));
                                    delete query['code'];
                                    delete query['state'];
                                    this.$message.success('登录成功')
                                    this.$router.replace({path: this.$route.path, query: query})
                                })


                            }
                        })
                    }
                },
                // 组件创建完后获取数据，
                // 此时 data 已经被 observed 了
                { immediate: true }
            )





        },
        mounted: function () {

            this.$nextTick(() => {
                jQuery(function () {
                    jQuery("#nex_rolltoptop").hide();
                    //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
                    jQuery(function () {
                        jQuery(window).scroll(function () {
                            if (jQuery(window).scrollTop() > 50) {
                                jQuery("#nex_rolltoptop").fadeIn(200);
                            } else {
                                jQuery("#nex_rolltoptop").fadeOut(200);
                            }
                        });
                        //当点击跳转链接后，回到页面顶部位置
                        jQuery("#nex_rolltoptop").click(function () {
                            jQuery('body,html').animate({
                                scrollTop: 0
                            }, 500);
                            return false;
                        });
                    });
                })
            })
        },
        methods: {
            getUserInfo() {
                this.$apis.userInfo({}).then(res => {
                    let userInfo = res.records;
                    this.$store.dispatch('user/updateUserInfo', userInfo)
                    // this.$store.dispatch('user/updateToken', token)
                })
            },
            goUserWeb() {

            }
        }
    }
</script>
<style lang="less">
    /*带背景的分页按钮背景色begin*/
    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #3b8efa;
        color: #FFF !important;
    }

    .el-pagination.is-background .el-pager li.active {
        color: #fff;
        cursor: default;
    }

    .el-pagination.is-background .el-pager li:hover {
        color: #3b8efa;
    }

    .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #3b8efa !important;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        background-color: #3b8efa;
        color: #FFF !important;
    }

    .el-input.is-active .el-input__inner, .el-input__inner:focus {
        border-color: #3b8efa;
    }

    .el-pagination__sizes .el-input .el-input__inner:hover {
        border-color: #3b8efa;
    }

    .el-select .el-input.is-focus .el-input__inner {
        color: #3b8efa;
    }

    .el-select-dropdown__item.selected {
        color: #3b8efa;
    }

    .nexsearch {
        .el-input__inner {
            border: 0px;
            padding: 0px 0px;
        }
    }

    /*带背景的分页按钮背景色end*/
</style>
